<template>
    <div class="row">
        <div class="col-3">
            <h3>Draggable 1</h3>
            <draggable class="list-group" :list="list1" group="people" @change="log">
                <div class="list-group-item" v-for="(element, index) in list1" :key="element.name" >{{ element.name }} {{ index }}</div>
            </draggable>
        </div>

        <div class="col-3">
            <h3>Draggable 2</h3>
            <draggable class="list-group" :list="list2" group="people" @change="log">
                <div class="list-group-item" v-for="(element, index) in list2" :key="element.name" >{{ element.name }} {{ index }}</div>
            </draggable>
        </div>
    </div>
</template>
<script>
import draggable from "vuedraggable";

export default {
    components: { draggable },
    data() {
        return {
            list1: [
                { name: "John", id: 1 },
                { name: "Joao", id: 2 },
                { name: "Jean", id: 3 },
                { name: "Gerard", id: 4 }
            ],
            list2: [
                { name: "Juan", id: 5 },
                { name: "Edgard", id: 6 },
                { name: "Johnson", id: 7 }
            ]
        };
    },
    methods: {
        add: function() {
            this.list.push({ name: "Juan" });
        },
        replace: function() {
            this.list = [{ name: "Edgard" }];
        },
        clone: function(el) {
            return {
                name: el.name + " cloned"
            };
        },
        log: function(evt) {
            window.console.log(evt);
        }
    }
};
</script>
<style lang="less">
    .col-3{
        text-align: center;
        .list-group{
            width: 100%;
            text-align: center;
            background: #f1f1f1;
            .list-group-item{
                width: 100px;
                line-height: 40px;
                text-align: center;
                border: 1px solid rgb(145, 145, 145);
            }
        }
    }
</style>